<template>
  <div class="wechat-setting-page">
    <page-header-wrapper>
      <a-card :bordered="false">
        <template>
          <a-row :gutter="[16, 30]" type="flex" align="middle">
            <a-col class="required" :span="4" style="text-align: right"> 平台： </a-col>
            <a-col :span="20">
              <a-radio-group @change="changeRadio" v-model="params.type">
                <a-radio :value="1"> 小程序 </a-radio>
                <a-radio :value="2"> 公众号 </a-radio>
                <a-radio :value="3"> app </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> appID： </a-col>
            <a-input class="input-class" v-model="params.app_id" disabled />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> appSecret： </a-col>
            <a-input class="input-class" v-model="params.app_secret" disabled />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 公司完整名称（用于分账）： </a-col>
            <a-input class="input-class" v-model="params.name" disabled />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 商户号： </a-col>
            <div style="margin: 10px 8px 25px 0">
              <a-input v-model="params.mch_id" style="width: 1100px" disabled />
              <div style="font-size: 14px; color: #aeaeae; margin-top: 5px">
                需要通过进件创建特约商户号 <span style="color: #1890ff; cursor: pointer" @click="$router.push({path:'/setting/merchantIncomingParts/wechat'})">添加进件内容></span>
              </div>
            </div>
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 微信支付Api支付密钥： </a-col>
            <a-input class="input-class" v-model="params.pay_key" disabled />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col :span="4" style="text-align: right"> 微信支付（apiclient_cert.pem）： </a-col>
            <a-textarea style="width: 600px; height: 100px; margin: 15px 0 40px 0" v-model="params.cert_pem" disabled />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col :span="4" style="text-align: right"> 微信支付（apiclient_key.pem）： </a-col>
            <a-textarea style="width: 600px; height: 100px; margin-bottom: 30px" v-model="params.key_pem" disabled />
          </a-row>
          <a-row v-if="params.type == 3" :gutter="[16, 30]" type="flex" align="top">
            <a-col :span="4" style="text-align: right"> app名称： </a-col>
            <a-input class="input-class" v-model="params.app_name" disabled />
          </a-row>
          <template v-if="params.type == 2">
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> 公众号token： </a-col>
              <a-input class="input-class" v-model="params.token" disabled />
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col :span="4" style="text-align: right"> 关注自动回复内容： </a-col>
              <a-input class="input-class" v-model="params.auto_reply" disabled />
            </a-row>
          </template>
        </template>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import { getWechatConfig } from '@/api/setting/wechatConfig'
export default {
  data() {
    return {
      params: {
        app_id: null,
        type: 1,
        app_secret: null,
        pay_key: null,
        cert_pem: null,
        key_pem: null,
        mch_id: null,
        auto_reply: null,
        token: null,
        app_name: null,
        name: null,
      },
      mini: {},
      mp: {},
      app: {},
      temp: {},
    }
  },
  async created() {
    await this.getData()
    if (this.mini) {
      this.params.app_id = this.mini.app_id
      this.params.app_secret = this.mini.app_secret
      this.params.cert_pem = this.mini.cert_pem
      this.params.key_pem = this.mini.key_pem
      this.params.pay_key = this.mini.pay_key
      this.params.mch_id = this.mini.mch_id
      this.params.name = this.mini.name
    }
  },
  methods: {
    getData: async function () {
      var params = { type: this.params.type }
      await getWechatConfig(params).then((res) => {
        const data = res.data
        this.mini = data.mini
        this.app = data.app
        this.mp = data.mp
      })
    },
  },
}
</script>

<style lang="less" scoped>
.wechat-setting-page {
  .required::before {
    content: '*';
    color: red;
  }
  .input-class {
    width: 1100px;
    margin: 10px 8px 25px 0;
  }
  input {
    max-width: 600px;
  }
}
</style>
